<template>
<div class="ac">
  <h2>This is Todo!!! <small>{{doneTodosCount}}</small> {{tag}}</h2>
  <div class="mark">
    <button type="button" name="button" @click="increment">clik me {{count}}</button>
  </div>
  <div class="lsit">
    <input type="text" @keyup.enter="addTodo" v-model="text">
    <ul>
      <li v-for="todo in doneTodos" :data-id="todo.id" @click="removeTodo(todo.id)">{{todo.text}}</li>
    </ul>
  </div>
</div>
</template>

<script>
import {
  mapState,
  mapGetters
} from 'vuex'

export default {
  name: 'hello',
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doneTodos',
      'doneTodosCount'
    ])
  },
  methods: {
    increment() {
      this.$store.commit('increment')
    },
    addTodo() {
      let test = this.text.replace(/^\s+|\s+$/, '')
      if (!test) return;
      this.$store.commit('addTodo', {
        id: Date.now(),
        text: test,
        done: true
      })
      this.text = ''
      this.$root.e.$emit('NAME.set', 'OKOK!!!')
    },
    removeTodo(id) {
      this.$store.dispatch('rmTodoAsync', id)
    }
  },
  data() {
    return {
      text: '',
      tag: this.$root.tag
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.lsit {
  margin-top: 30px
}
ul {
  max-width: 200px;
  margin: 30px auto;
}
li {
  cursor: pointer;
}
</style>
